<div class="cq-setting" id="cq-setting">
  <div class="cq-setting--mask">
    <div class="cq-setting--panel">
      <div class="cq-setting--bar">
        <h3 class="cq-setting--title">设置面板</h3>
        <div class="cq-setting--close cq-contral--hide_setting">
          <i></i>
        </div>
      </div>
      <div class="cq-setting--content">
        <div class="cq-setting--group">
          <h4 class="cq-setting--title">导航和主题</h4>
          <ul class="cq-setting--itemlist">
            <li class="cq-setting--item">
              <div class="cq-setting--description">
                <h5 class="cq-setting--title">深色主题</h5>
                <p>将网站颜色调为护眼模式。</p>
              </div>
              <div class="cq-setting--meta">
                <label class="cq-switch cq-switch--s1n1">
                  <input class="cq-switch--input" type="checkbox" id="set-theme-dark" />
                  <div class="cq-switch--core"></div>
                </label>
              </div>
            </li>
            <li class="cq-setting--item is-accordion">
              <div class="cq-accordion">
                <div class="cq-accordion--lable">
                  <div class="cq-accordion--prepend">
                    <div class="cq-setting--description">
                      <h5 class="cq-setting--title">深色主题</h5>
                      <p>将网站颜色调为护眼模式。</p>
                    </div>
                  </div>
                  <div class="cq-accordion--append">
                    <span>打开</span>
                  </div>
                </div>
                <div class="cq-accordion--content">
                  <ul class="cq-setting--childitemlist">
                    <li class="cq-setting--item">
                      <div class="cq-setting--description">
                        <p>预设主题</p>
                      </div>
                      <div class="cq-setting--meta">
                        <label class="cq-switch cq-switch--s1n1">
                          <input class="cq-switch--input" type="checkbox" />
                          <div class="cq-switch--core"></div>
                        </label>
                      </div>
                    </li>
                    <li class="cq-setting--item">
                      <div class="cq-setting--description">
                        <p>预设主题</p>
                      </div>
                      <div class="cq-setting--meta">
                        <label class="cq-switch cq-switch--s1n1">
                          <input class="cq-switch--input" type="checkbox" />
                          <div class="cq-switch--core"></div>
                        </label>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="cq-setting--group">
          <h4 class="cq-setting--title">导航和主题</h4>
          <ul class="cq-setting--itemlist">
            <li class="cq-setting--item">
              <div class="cq-setting--description">
                <h5 class="cq-setting--title">固定头部</h5>
              </div>
              <div class="cq-setting--meta"></div>
            </li>
            <li class="cq-setting--item">
              <div class="cq-setting--description">
                <h5 class="cq-setting--title">固定头部</h5>
              </div>
              <div class="cq-setting--meta"></div>
            </li>
          </ul>
        </div>
        <div class="cq-setting--group">
          <h4 class="cq-setting--title">导航和主题</h4>
          <ul class="cq-setting--itemlist">
            <li class="cq-setting--item">
              <div class="cq-setting--description">
                <h5 class="cq-setting--title">固定头部</h5>
              </div>
              <div class="cq-setting--meta"></div>
            </li>
            <li class="cq-setting--item">
              <div class="cq-setting--description">
                <h5 class="cq-setting--title">固定头部</h5>
              </div>
              <div class="cq-setting--meta"></div>
            </li>
          </ul>
        </div>
        <div class="cq-setting--group">
          <h4 class="cq-setting--title">导航和主题</h4>
          <ul class="cq-setting--itemlist">
            <li class="cq-setting--item">
              <div class="cq-setting--description">
                <h5 class="cq-setting--title">固定头部</h5>
              </div>
              <div class="cq-setting--meta"></div>
            </li>
            <li class="cq-setting--item">
              <div class="cq-setting--description">
                <h5 class="cq-setting--title">固定头部</h5>
              </div>
              <div class="cq-setting--meta"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>